<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书城</title>
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{/css/index.css}" />
    <link rel="stylesheet" th:href="@{/css/site.css}" />
    <link rel="stylesheet" th:href="@{/css/layui/css/layui.css}" />
    <script th:src="@{/js/jquery-3.6.0.js}"></script>

</head>
<body>
<div th:replace="~{/commons/Header :: header}"></div>

<div class="swiper">
    <div class="container">
        <div class="swiper-wrapper">
        </div>
        <div class="goods-sorts">
            <ul>
                <li><a href="javascript:;">文艺<i class="mi-icon icon-right"></i></a>
                    <div class="children">
                        <ul class="left">
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                        </ul>
                        <ul class="left">
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                            <li><a href="">
                                <img src="imgs/default.jpg" >
                                <span>Xiaomi Civi</span>
                            </a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="javascript:;">生活<i class="mi-icon icon-right"></i></a></li>
                <li><a href="javascript:;">科技  <i class="mi-icon icon-right"></i></a></li>
                <li><a href="javascript:;">教育<i class="mi-icon icon-right"></i></a></li>
                <li><a href="javascript:;">童书<i class="mi-icon icon-right"></i></a></li>
                <li><a href="javascript:;">人文社科<i class="mi-icon icon-right"></i></a></li>
                <li><a href="javascript:;">青春文学<i class="mi-icon icon-right"></i></a></li>
                <li><a href="javascript:;">动漫<i class="mi-icon icon-right"></i></a></li>
                <li><a href="javascript:;">艺术<i class="mi-icon icon-right"></i></a></li>
                <li><a href="javascript:;">历史<i class="mi-icon icon-right"></i></a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container ad-1 clear">
    <div class="service left">
        <ul>
            <li><a th:href="@{/recover/toRecover}">
                <img src="imgs/service-1.png" >
                回收服务
            </a></li>
            <li><a href="javascript:void(0);">
                <img src="imgs/service-2.png" >
                团购
            </a></li>
            <li><a href="javascript:void(0);">
                <img src="imgs/service-3.png" >
                会员通道
            </a></li>
            <li><a href="javascript:void(0);">
                <img src="imgs/service-4.png" >
                米粉卡
            </a></li>
            <li><a href="javascript:void(0);">
                <img src="imgs/service-5.png" >
                以旧换新
            </a></li>
            <li><a href="javascript:void(0);">
                <img src="imgs/service-6.png" >
                充值
            </a></li>
        </ul>
    </div>
    <div class="ad left">
        <div class="ad-2">
            <ul>
                <li><a href=""><img src="imgs/swiperUnder1.jpg" ></a></li>
                <li><a href=""><img src="imgs/swiperUnder2.jpg" ></a></li>
                <li><a href=""><img src="imgs/swiperUnder3.jpg" ></a></li>
                <li><a href=""><img src="imgs/swiperUnder4.jpg" ></a></li>
            </ul>
        </div>
    </div>
</div>
<div class="recommend">
    <div class="container">
        <div class="banner">
            <a href="">
                <img src="imgs/img_1.png" />
            </a>
        </div>

        <!-- 二手书 -->
        <div class="brick">
            <div class="brick-head clear">
                <h2 class="title left">二手书专区</h2>
                <div class="more right">
                    <a href="">查看更多
                        <i class="mi-icon icon-right"></i>
                    </a>
                </div>
            </div>
            <div class="brick-box clear">
                <div class="left brick-left-single">
                    <a href=""><img src="imgs/banner-1.jpg" ></a>
                </div>
                <div class="right">
                    <div class = "usedBookList">
                        <ul>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 家电 -->
        <!--<div class="brick">
            <div class="brick-head clear">
                <h2 class="title left">家电</h2>
                <div class="more right">
                    <a href="">查看更多
                        <i class="mi-icon icon-right"></i>
                    </a>
                </div>
            </div>
            <div class="brick-box clear">
                <div class="left brick-left-single">
                    <a href=""><img src="imgs/brick-box-goods-1.webp" ></a>
                </div>
                <div class="right">
                    <ul>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>-->

        <!--<div class="banner">
            <a href="">
                <img src="imgs/banner-2.webp" />
            </a>
        </div>-->

        <!-- 电脑 -->
        <!--<div class="brick">
            <div class="brick-head clear">
                <h2 class="title left">电脑</h2>
                <div class="more right">
                    <a href="">查看更多
                        <i class="mi-icon icon-right"></i>
                    </a>
                </div>
            </div>
            <div class="brick-box clear">
                <div class="left brick-left-single">
                    <a href=""><img src="imgs/brick-box-goods-1.webp" ></a>
                </div>
                <div class="right">
                    <ul>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                        <li><a href="">
                            <div class="img">
                                <img src="imgs/brick-box-goods-2.webp" >
                            </div>
                            <h3 class="title">黑鲨4S</h3>
                            <p class="desc">磁动力升降肩键</p>
                            <p class="price">2699元起</p>
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>-->
        <!--<div class="banner">
            <a href="">
                <img src="imgs/banner-3.webp" />
            </a>
        </div>-->
    </div>
</div>


<div th:replace="~{/commons/Header :: footer}"></div>


<script th:src="@{/js/jquery-3.6.0.js}" ></script>
<script th:src="@{/js/index.js}" ></script>
<script th:src="@{/js/swiper.js}" ></script>
<script type="text/javascript">

    // 创建轮播插件
    var swiper = new Swiper({
        elem: '.swiper-wrapper',
        width: 1226,
        height: 460,
        speed: 2000,
        imgs: [
            {img:"imgs/swiper6.jpg", link: ""},
            {img:"imgs/swiper7.jpg",  link: ""},
            {img:"imgs/swiper8.jpg",  link: ""},
            {img:"imgs/swiper9.jpg",  link: ""},
            {img:"imgs/swiper-5.webp", link: ""} ]
    });
    // 初始化轮播图
    swiper.init();
</script>
</body>
</html>